<!-- 条件筛选 -->
<template>
	<view class="filter-placeholder">
		<view class="filter-fixed">
			<view class="item" v-for="item in select" :key="item.name" :class="{'active': item.isShowPanel}"
				@click="handleShowPanel(item)">
				<text class="label">{{item.label}}</text>
				<text class="iconfont select-icon">&#xe62a;</text>
			</view>
		</view>
	</view>

	<!-- 所有面板 -->
	<view class="panel" v-if="isShowPanel">
		<!-- 区域面板 -->
		<RegionPanel v-if="select[0].isShowPanel"></RegionPanel>
		<!-- 分类面板 -->
		<CategoryPanel v-if="select[1].isShowPanel"></CategoryPanel>
		<!-- 距离面板 -->
		<DistancePanel v-if="select[2].isShowPanel"></DistancePanel>
		<!-- 评分面板 -->
		<ScorePanel v-if="select[3].isShowPanel"></ScorePanel>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import RegionPanel from './filter-bar-panel/region-panel.vue';
	import CategoryPanel from './filter-bar-panel/category-panel.vue';
	import DistancePanel from './filter-bar-panel/distance-panel.vue';
	import ScorePanel from './filter-bar-panel/score-panel.vue';

	const select = ref([
		{ label: '区域', name: 'region', isShowPanel: false },
		{ label: '分类', name: 'category', isShowPanel: false },
		{ label: '距离', name: 'distance', isShowPanel: false },
		{ label: '评分', name: 'score', isShowPanel: false },
	]);

	const isShowPanel = computed(() => {
		return select.value.some(item => item.isShowPanel);
	});

	const handleShowPanel = (row) => {
		if (row.isShowPanel) {
			row.isShowPanel = false;
			return;
		}

		select.value.forEach(item => {
			item.isShowPanel = false;
		});

		row.isShowPanel = true;
	}
</script>

<style lang="scss" scoped>
	.filter-placeholder {
		height: 70rpx;
	}

	.filter-fixed {
		position: fixed;
		top: 122rpx;
		left: 0;
		z-index: 8;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		width: 100%;
		height: 70rpx;
		background-color: white;

		.item {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			height: 100%;
			padding: 10rpx 20rpx 0;
			overflow: hidden;
			box-sizing: border-box;

			.label {
				font-size: 28rpx;
				color: #222;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.select-icon {
				flex-shrink: 0;
				font-size: 20rpx;
				color: #222;
				padding: 10rpx;
				transition: transform 0.2s;
			}

			&.active {
				.label {
					font-weight: bold;
				}

				.select-icon {
					transform: rotate(180deg);
				}
			}
		}
	}

	.panel {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
	}
</style>